<template>
  <view class="join-records-container">
    <!-- 记录列表 -->
    <view class="records-scroll">
      <view class="records-list">
        <view
            v-for="(record, index) in pageData.data"
            :key="record.id || index"
            class="record-card"
            @click="viewRecordDetail(record)"
        >
          <!-- 活动封面 -->
          <view class="record-cover">
            <image
                :src="record.shopLog || '/static/logo.png'"
                mode="aspectFill"
                class="cover-image"
            ></image>
          </view>

          <!-- 活动信息 -->
          <view class="record-content">
            <view class="content-header">
              <text class="activity-title">{{ record.title }}</text>
              <view class="organizer-info">
                <text class="organizer-label">主理人 {{record.userName}}</text>
                <view class="organizer-avatars">
                  <image
                      v-for="(item, idx) in (record.joins)"
                      :key="idx"
                      :src="item.avatar"
                      class="organizer-avatar"
                      mode="aspectFill"
                  ></image>
                </view>
              </view>
            </view>

            <view class="activity-meta">
              <view class="meta-row">
                <view class="meta-item">
                  <text class="meta-icon">📅</text>
                  <text class="meta-text">{{record.beginDate}}</text>
                </view>
                <view class="participant-count">
                  <text class="count-text">{{ record.fee || 0 }}/位</text>
                </view>
              </view>

              <view class="meta-row">
                <view class="meta-item">
                  <text class="meta-icon">📍</text>
                  <text class="meta-text">{{ record.shopAddress || '待定' }}</text>
                </view>
                <view class="time-info">
                  <text class="time-text"> </text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="pageData.data.length === 0 && !loading" class="empty-state">
          <image src="/static/logo.png" class="empty-icon" mode="aspectFit"></image>
          <text class="empty-text">暂无报名记录</text>
          <text class="empty-tip">快去参与一些有趣的活动吧！</text>
        </view>

        <!-- 加载状态 -->
        <view v-if="status==='loading'" class="loading-state">
          <view class="loading-spinner"></view>
          <text class="loading-text">加载中...</text>
        </view>

        <!-- 没有更多 -->
        <view v-if="status==='noMore'" class="no-more">
          <view class="no-more-line"></view>
          <text class="no-more-text">已显示全部记录</text>
          <view class="no-more-line"></view>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup>
import {usePageData} from "../../common/usePageData";
import {ref} from 'vue'

const searchObject = ref({
  catalog: null,
  page: 1,
  size: 10,
  beginDate:null,
  endDate:null
})

const { pageData, status, searchList, search, loading, loadMore } = usePageData("front_topic_my_list", searchObject)

// 响应式数据


const viewRecordDetail = (record) => {
  uni.navigateTo({
    url: `/pages/topic/index?id=${record.id}&shopJoin=2`
  })
}

const viewDetail = (record) => {
  viewRecordDetail(record)
}


</script>

<style scoped>
.join-records-container {
  min-height: 100vh;
  position: relative;
}


.filter-tab.active .filter-text {
  color: #667eea;
  font-weight: 600;
}

.filter-tab.active .filter-count {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}





/* 记录区域样式 */
.records-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
}




.records-scroll {
  flex: 1;
  overflow-y: auto;
  padding-top: 20rpx;
}

.records-list {
  padding: 0 30rpx 30rpx;
}

/* 记录卡片样式 */
.record-card {
  background: #fff;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.record-card:active {
  transform: translateY(4rpx);
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.record-cover {
  position: relative;
  height: 320rpx;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24rpx;
}

.status-badge {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10rpx);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
  color: #666;
}

.status-pending {
  background: rgba(255, 149, 0, 0.9);
  color: #fff;
}

.status-approved {
  background: rgba(52, 199, 89, 0.9);
  color: #fff;
}

.status-rejected {
  background: rgba(255, 59, 48, 0.9);
  color: #fff;
}

.status-cancelled {
  background: rgba(142, 142, 147, 0.9);
  color: #fff;
}

.price-tag {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10rpx);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 20rpx;
  color: #ff6b35;
  font-weight: 500;
}

.price-value {
  font-size: 28rpx;
  color: #ff6b35;
  font-weight: 700;
  margin-left: 2rpx;
}

.record-content {
  padding: 24rpx;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.activity-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
  flex: 1;
  margin-right: 20rpx;
}

.organizer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.organizer-label {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.organizer-avatars {
  display: flex;
  gap: -8rpx;
}

.organizer-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 3rpx solid #fff;
  margin-left: -8rpx;
}

.organizer-avatar:first-child {
  margin-left: 0;
}

.activity-meta {
  margin-bottom: 20rpx;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.meta-row:last-child {
  margin-bottom: 0;
}

.meta-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.meta-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.meta-text {
  font-size: 26rpx;
  color: #666;
}

.participant-count {
  font-size: 24rpx;
  color: #ff6b35;
  font-weight: 600;
}

.count-text {
  color: #ff6b35;
}

.time-info {
  font-size: 24rpx;
  color: #667eea;
  font-weight: 600;
}

.time-text {
  color: #667eea;
}

.record-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16rpx;
  border-top: 1rpx solid #f5f5f5;
}

.join-info {
  display: flex;
  align-items: center;
}

.join-label {
  font-size: 22rpx;
  color: #999;
}

.join-time {
  font-size: 22rpx;
  color: #666;
  margin-left: 4rpx;
}

.action-buttons {
  display: flex;
  gap: 12rpx;
}

.action-btn {
  padding: 8rpx 20rpx;
  font-size: 24rpx;
  border-radius: 20rpx;
  border: none;
  line-height: 1.2;
  font-weight: 500;
}



.detail-btn {
  background: #667eea;
  color: #fff;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 30rpx;
  text-align: center;
}

.empty-icon {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 40rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.empty-tip {
  font-size: 26rpx;
  color: #999;
}

/* 加载状态样式 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 6rpx solid #f3f3f3;
  border-top: 6rpx solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 26rpx;
  color: #999;
}

.load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
}

.load-more-text {
  font-size: 26rpx;
  color: #999;
}

.no-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  gap: 20rpx;
}

.no-more-line {
  flex: 1;
  height: 1rpx;
  background: #e0e0e0;
}

.no-more-text {
  font-size: 24rpx;
  color: #ccc;
  padding: 0 20rpx;
}



@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}





</style>
